<script setup lang="ts">
import b from "~/assets/images/news/banner-bg.jpg"
</script>

<template>
  <div class="product">
    <div class="product-top">
      <div class="banner-container">
        <BannerMedia :url="b"/>
      </div>
      <h1 class="title">服务与产品</h1>
    </div>
    <div class="product-intro">
      <div class="title">我们的产品</div>
      <div class="desc">
        拥有遍布亚洲及跨越全球的网络，提供全口岸、全过程的一站式综合口岸物流服务，依托综合服务能力，打造方便便捷的完整供应链服务体系。
      </div>
    </div>
    <div class="product-content">
      <div class="product-content-item" v-for="i in 5">
        <div class="copywriting">
          <div class="p-name">快手</div>
          <div class="p-desc">覆盖微博亿级优质用户资源短视频已经成为信息传递的主要载体，移动互联网
            时代，用户在哪里，营销就在哪里</div>
          <NuxtLink to="/" class="p-detail">
            <ViewMore/>
          </NuxtLink>
        </div>
        <div class="poster">
          <img src="" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.product-top {
  position: relative;
  width: 24rem;
  height: 8.54rem;
  padding-left: 1.66rem;
  padding-top: 3.78rem;

  .title {
    font-size: 1rem;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 0.6rem;
  }

  .banner-container {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.product-intro {
  padding-left: 1.78rem;
  padding-top: 0.88rem;

  .title {
    font-size: 0.48rem;
    font-weight: 500;
    color: #000000;
  }

  .desc {
    margin-top: 0.25rem;
    font-size: 0.23rem;
    font-weight: 400;
    color: #000000;
  }
}

.product-content {
  padding-top: 0.91rem;
  padding-left: 1.78rem;
  padding-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;

  &-item {
    display: flex;
    margin-bottom: 0.64rem;
    &:nth-child(2n){
      flex-direction: row-reverse;
    }

    .copywriting {
      width: 10.29rem;
      height: 6.35rem;
      background: #323941;
      padding-left: 1.13rem;
      padding-top: 1.49rem;
      color: #FFFFFF;

      .p-name{
        font-size: 0.35rem;
        font-weight: 500;
        margin-bottom: 0.6rem;
      }
      .p-desc{
        width: 7.64rem;
        font-size: 0.23rem;
        font-weight: 400;
        line-height: 0.45rem;
      }
      .p-detail{
        display: inline-block;
        margin-top: 1.41rem;
      }
    }

    .poster {
      img {
        width: 10.29rem;
        height: 6.35rem;
        background: #ccc;
      }
    }
  }
}
</style>
